
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物商城-首页</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        * {
            margin: 0 auto;
            padding:0;
            list-style: none;
        }
        .header-a{
            text-decoration: none;
            color: #CCCCCC;
        }
        .header-a:hover{
            color: black;
        }
        .header_li1{
            float: left;
            line-height: 30px;
            margin-left: 24px;
            text-align: center;
        }
        .header_li1 a{
            color:#FFFFFF;
            text-decoration: none;
            font-size: 13px;
            border-right: #CCCCCC;
        }
        .header_li1 a:hover{
            color:#FFFF00;
        }
        .li1{
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            border-bottom: 1px solid #000000;
            font-size: 12px;
        }
        .li1a{
            text-decoration: none;
        }
        .span1{
            color:#F5D687;
            font-size: 18px;
            position: absolute;
            right: 5px;
        }
        .imag{
            padding-top: 5px;
            /*height:130px;*/
            height: 80px;
        }
        .table_div:hover{
            border:2px solid lightskyblue;
        }
        .table_div {
            border: 2px solid #DDDDDD;
            height: 100px;
            width: 160px;
        }
        .table_p a {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function searchContent(){
            var content = $("#content").val();
            content = content.replace(/(^\s*)|(\s*$)/g, '');
            if(content == '' || content == undefined || content == null) {
                return
            }else {
                var type_code =  $("#dropDownBox").find("option:selected").val();
                window.location.href = "searchContent?content=" + content + "&type_code=" + type_code;
            }
        }
        $(function () {
            var userName = "${user.name}"
            var text = "[<a href= 'toLoginPage'>登录</a>]&nbsp;[<a href= 'toRegisterPage'>免费注册</a>]"
            if(userName != "") {
                text = userName + "&nbsp;&nbsp[<a href= 'logout'>注销</a>]";
            }
            $("#loginSpan").html(text)
            <c:forEach var="article" items="${articleList}">
                var price = ${article.price};
                var discount = ${article.discount};
                function computePrice() {
                    var result = (price * discount).toFixed(2);
                    return  result;
                }
                $("#${article.id}").html("&nbsp;&nbsp;&nbsp;￥:" + computePrice());
            </c:forEach>
            var queryParam =  getQueryString("type_code");
            if(queryParam != null) {
                $("#dropDownBox").find("option[value=" + queryParam +"]").attr("selected",true);
                var content = $("#dropDownBox").find("option:selected").html();
                $("#title").html(content);
            }
            var text = $("#dropDownBox").children('option:selected').html();
            $("#title").html(text);
            $('#dropDownBox').change(function() {
                var text = $(this).children('option:selected').html();
                $("#title").html(text);
                var type_code = $(this).children('option:selected').val();
                window.location.href = "getArticleType?type_code=" + type_code;//页面跳转并传参
            })
        });
    </script>
</head>
<body>


<div class="layui-main" style="height: 32px;width: 100%;background-color: #EFEFEF;">
    <!--头页的第一部分-->
    <div class="layui-main" style="height: 32px;width: 1000px;font-size: 12px;line-height: 32px;text-align:right">
        官方网站<a href="https://www.douyu.com/directory/myFollow">http://gz.gec-edu.org/?gzbdgzbdyueqianpc23</a>
        <span id="loginSpan"></span>
        [<a href="toShopCarPage">我的购物车</a>]
        [<a href="toOrderDetailPage">我的订单</a>]
        [<a href="#">设置为首页</a>]
        [<a href="#">加入收藏</a>]
    </div>
    <!--头页的第二部分-->
    <div class="layui-main" style="width: 1000px;height: 150px;;position: relative">
        <img src="images/article/logo.gif">
        <img src="images/banner.gif" alt="" style="margin-top: 10px">

        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px">
            <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">关于我们</a></div>
            <div style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">联系方式</a></div>
        </div>
    </div>
    <!--头页的第三部分-->
    <div  style="width: 100%;height: 30px;background-color: #CC3333 ">
        <div class="layui-main" style="width: 1000px;height: 30px;">
            <ul>
                <li class="header_li1"><a href="#"> 首页</a></li>
                <c:forEach items="${articleTypeBigList}" var="articleType">
                    <li class="header_li1"><a href="getArticleType?type_code=${articleType.code}"> ${articleType.name}</a></li>
                </c:forEach>
            </ul>

        </div>

    </div>
</div>



<div class="layui-main" style="width: 1000px;height: 700px;position:relative;top: 3px;margin-top: 195px">
    <%--左边部分--%>
    <div style="width: 22%;height: 523px;background-color: #F6A65B;position: absolute;left:0px">
    <p style="margin-left: 5px;margin-top: 5px;font-weight: bold;font-family: 黑体;">物品分类</p>
        <div style="background-color: #FFFFFF;margin: 2px">
            <ul>
                <li class="li1"><a href="#" class="li1a"> .首页</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0001" class="li1a"> .护肤</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0002" class="li1a"> .彩妆</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0003" class="li1a"> .香氛</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0004" class="li1a"> .身体护理</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0005" class="li1a"> .礼盒套装</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0006" class="li1a"> .母婴专区</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0007" class="li1a"> .男士专区</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0008" class="li1a"> .粉底</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0009" class="li1a"> .粉饼</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0010" class="li1a"> .睫毛膏</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0011" class="li1a"> .唇彩</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0012" class="li1a"> .腮红</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0013" class="li1a"> .食品保障</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0014" class="li1a"> .瘦身类</a><span class="span1">&gt;</span></li>
                <li class="li1"><a href="getArticleType?type_code=0015" class="li1a"> .美容类</a><span class="span1">&gt;</span></li>
            </ul>
        </div>
    </div>
    <%--右边部分--%>
    <div style="width: 78%;height: 500px;position: absolute;left: 22%">

        <div>
            <table>
                <tr>
                    <td><p style="font-size: 18px">物品类型</p></td>
                    <td>
                        <select id="dropDownBox" style="width: 100px;height: 28px;font-size:18px ">
                            <c:forEach items="${articleTypeSmallList}" var="articleType" >
                                <option value="${articleType.code}" >${articleType.remark}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td><input type="text" style="width: 300px;height: 28px" id="content"></td>
                    <td><button  style="height: 28px;font-size: 18px;font-family: 黑体" onclick="searchContent()">搜索</button></td>
                </tr>
            </table>
        </div>
        <div style="border-bottom-left-radius:5px;border-bottom-right-radius: 5px;width: 99%;height: 845px;border-radius: 5px;border: 2px solid #CCCCCC;">
                <div style="height:40px;width:99%;background-color: #F6AF3A;border-radius: 5px 5px 0px 0px;border-left: 2px #E8920D solid;border-top: 2px #E8920D solid;border-right: 2px #E8920D solid;top: 2px;position: relative">
                    <div style="width: 80px;height:30px;;background-color: #FFFFFF;;font-size: 20px;;font-weight: bold;text-align: center;line-height: 30px;position: absolute;bottom:0px;left: 5px;border-top-left-radius:5px;border-top-right-radius: 5px "><span style="color: #F6AF3A" id="title">护肤</span></div>
                </div>
                <div style="overflow: auto;width: 99%;height: 800px;border-radius: 0px 0px 5px 5px;border: 2px #CCCCCC solid">
                    <div class="layui-carousel" id="test10">
                        <div carousel-item="">
                            <div><img src="images/1.png"></div>
                            <div><img src="images/2.png"></div>
                            <div><img src="images/3.png"></div>
                            <div><img src="images/4.png"></div>
                            <div><img src="images/5.png"></div>
                            <div><img src="images/6.png"></div>
                            <div><img src="images/7.png"></div>
                        </div>
                    </div>
                    <table style="text-align: center;border-spacing: 10px 40px;margin-top: 10px">
                        <c:if test="${not empty articleList}">
                            <tr>
                            <c:forEach var="article" items="${articleList}" varStatus="status">
                                <td >
                                    <div class="table_div">
                                        <a href="toArticleInfoPage?articleId=${article.id}"><img class="imag" src="images/article/${article.image}"></a>
                                    </div>
                                    <p>
                                        <span  style="font-size:16px;color: #CCC;font-weight: bold">￥:${article.price}</span><span id="${article.id}" style="font-size: 16px;color: #CC0000;font-weight: bold">&nbsp;&nbsp;&nbsp;￥:</span>
                                    </p>
                                        <%--                                 <p class="table_p" style="width: 150px;"><a href="javascript:void(0)" onclick="submitID(${article.id})" style="color: black">${article.title}</a></p>--%>
                                    <p class="table_p" style="width: 150px;"><a href="toArticleInfoPage?articleId=${article.id}"  style="color: black">${article.title}</a></p>
                                </td>
                                <c:if test="${status.count % 4 == 0}">
                                    <tr>
                                </c:if>
                            </c:forEach>
                            </tr>
                        </c:if>
                        <c:if test="${empty articleList}">
                            <h1 style="width: 100%;text-align: center;height: 200px;line-height: 200px"><a href="getArticleType">当前该种类商品为空,请选择其余种类商品</a></h1>
                        </c:if>
                    </table>
                </div>
        </div>
    </div>
</div>
<div class="layui-main" style="width: 1000px; margin-top: 300px">
    <img src="images/step.jpg" alt="">
</div>

<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '760px'
            ,height: '440px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>


</body>


</html>
